<template>
  <div class="PayBookTitle">
    <dl class="dl-lg" style="font-size: 16px;">
      <dt>分类：</dt>
      <span @click="getSecCateId(null)"> <a :class="queryGoods.cateId==null?'active':''"
                                            href="javascript:void(0)">全部</a></span>
      <dd>
        <ul>
          <li v-for="(cateitem,index) in categoryList" :key="index">
            <el-dropdown @visible-change="showSecond(index)">
            <span class="el-dropdown-link" @click.prevent="getSecCateId(cateitem.id)">
              <a style="font-size: 16px;" :class="queryGoods.cateId==cateitem.id||cateFatherId==cateitem.id||isMychild(cateitem.id,queryGoods.cateId)?'active':''"
                 href="javascript:void(0)"> {{ cateitem.name }}</a>
             <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="(objItem,index) in cateSecond" :key="index">
                  <div @click.prevent="getSecCateId(objItem.id,true,objItem)">{{ objItem.name }}</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </dd>
    </dl>
    <dl class="dl-lg" style="font-size: 16px;">
      <dt>科目：</dt>
      <dd>
        <span @click="getObjId(null)">
           <a :class="queryGoods.subId==null?'active':''" href="javascript:void(0)">全部</a>
        </span>
        <ul>
          <li v-for="(item,index) in objectList" :key="index"><a href="javascript:void(0)"
                                                                 :class="queryGoods.subId==item.id?'active':''">
            <div @click.prevent="getObjId(item.id)">{{ item.name }}</div>
          </a></li>
        </ul>
      </dd>
    </dl>
    <ul class="tip" style="font-size: 22px">
      <li v-show="showTip"><a href="javascript:void(0);"
                              :class="queryGoods.sort=='recommend'||queryGoods.sort==''||queryGoods.sort==null?'active':''"
                              @click.prevent="getRecommend('recommend')"><i class="el-icon-s-flag">推荐</i></a></li>
      <li v-show="showTip"><a href="javascript:void(0);" :class="queryGoods.sort=='sale'?'active':''"
                              @click.prevent="getSales('sale')"><i class="el-icon-s-finance">销量</i></a>
      </li>
      <li v-show="showTip"><a href="javascript:void(0);" :class="queryGoods.sort=='price'?'active':''"
                              @click.prevent="priceTop('price')"><i class="el-icon-s-data">价格</i></a></li>
      <li v-show="showTip"><a href="javascript:void(0);" :class="queryGoods.order=='1'?'active':''"
                              @click.prevent="up(1)"><i class="el-icon-top">升序</i></a></li>
      <li v-show="showTip"><a href="javascript:void(0);" :class="queryGoods.order=='0'?'active':''"
                              @click.prevent="down(0)"><i class="el-icon-bottom">降序</i></a></li>
      <li>
        <el-input
            placeholder="请输入书籍名称或作者名称"
            v-model="queryGoods.keyword">
          <el-button slot="append" icon="el-icon-search" @click="submit" @keyup.enter="submit"></el-button>
        </el-input>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "PayBookTitle",

  data() {
    // noinspection JSAnnotator
    return {
      // categoryList: ['小学', '初中', '教与学 系列图书', '少儿读物'],
      categoryList: [],
      // objectList: ['语文', '数学', '英语', '历史', '生物', '地理', '物理', '化学', '道德与法治', '国学', '书法'],
      objectList: [],
      priceList: ['套装特价', '团购特价', '促销特价'],
      parentId: null,
      cateSecond: [],
      cateFatherId: null
    }
  },
  props: {
    queryGoods: {
      keyword: null,
      cateId: null,
      subId: null,
      sort: null,  //
      order: 0,    //0 表示降序  1 表表示升序
    },
    showTip: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    isMychild(fid, cid) {
      let target = false;
      let fobj = null
      this.categoryList.some(item => {
        if (item.id == fid) {
          fobj = item
          return true
        }
      })
      if (fobj != null) {
        fobj.children.forEach(item => {
          if (item.id == cid) {
            target = true;
          }

        })
      }
      return target;
    },
    priceTop(price) {
      this.queryGoods.sort = price
      this.submit()
    },
    getSales(sale) {
      this.queryGoods.sort = sale
      this.submit()
    },
    getRecommend(recommend) {
      this.queryGoods.sort = recommend
      this.submit()
    },
    up(orderId) {
      this.queryGoods.order = parseInt(orderId)
      this.submit()
    },
    down(orderId) {
      this.queryGoods.order = parseInt(orderId)
      this.submit()
    },

    getObjId(objId) {
      this.queryGoods.subId = objId
      this.submit()
    },
    submit() {
      this.$emit('childByValue', this.queryGoods)
    },
    getSecCateId(cateId, isSec, item) {
      if (isSec) {
        this.cateFatherId = item.parentId
        // console.log(item)
      } else {
        this.cateFatherId = null
      }

      this.queryGoods.cateId = cateId
      // console.log(objId,secCateId)
      let url = ''
      if (cateId != null) {
        url = '/p/pms/subject/cate/' + cateId
      } else {
        url = '/p/pms/subject/listAll'
      }
      this.getRequest(url).then((resp) => {
        this.objectList = resp.data
        const ids = this.objectList.map(i => i.id)
        // console.log(ids, this.queryGoods.subId)
        if (this.queryGoods.subId) {
          if (ids.indexOf(this.queryGoods.subId) === -1) {
            this.queryGoods.subId = null
          }
        }
      }).then(() => {
        this.submit()
      })


    },
    showSecond(index) {
      this.cateSecond = this.categoryList[index].children
    },
    itemClick(cateId) {
      console.log(cateId)
    },
  },
  created() {
    // 获取顶级分类
    this.getRequest('/p/pms/bookCategory/listTree').then((resp) => {
      this.categoryList = resp.data
      this.parentId = resp.data.parentId
    })
    // 获取科目
    if(this.queryGoods.cateId!=null){

      this.getRequest('/p/pms/subject/cate/' + this.queryGoods.cateId).then((resp) => {
        this.objectList = resp.data
        // console.log(this.objectList)
      })
    }else {
      this.getRequest('/p/pms/subject/listAll').then((resp) => {
        this.objectList = resp.data
        // console.log(this.objectList)
      })
    }

  }
}
</script>

<style scoped>
.tip {
  /*width: 638px;*/
  height: 55px;
  overflow: hidden;
}

.tip li {
  float: left;
  margin-right: 1em;
  line-height: 40px;
}

.tip li:last-of-type {
  float: right;
}

.tip:after {
  clear: both;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.el-breadcrumb {
  font-size: 14px;
  line-height: 1;
  /* margin: 1em auto; */
  width: 100%;
}

.PayBookTitle .dl-lg {
  width: 71em;
  /* height: 50px; */
  height: 2em;
  border-bottom: lightgray solid 1px;
  margin: 1em auto;
}
/*.PayBookTitle a{*/
/*  color: #35b5e5;*/
/*}*/

.dl-lg dt {
  float: left;
}

dl dd {
  float: left;
}

dl dd ul {
  float: left;
}

dl span {
  float: left;
  margin: 0 2em;
}

dl dd ul li {
  float: left;
  margin-right: 3em;
}

dl dt {
  float: left;
}
</style>